<template>
  <div class="testPage">
    <Row type="flex" justify="center" align="top">
      <Col :xs="{span:18,offset:3}" :lg="{span:6,offset:9}">
        <Input
          v-model="value"
          placeholder=""
          size="large"
          icon="ios-search"
          @on-change="updateSuggest"
          @on-click="search"
          @on-blur="hideSuggest"
        ></Input>
      </Col>
    </Row>

    <Row type="flex" justify="center" align="top">
      <Col
        :xs="{span:18,offset:3}" :lg="{span:4,offset:10}"
        v-if="showSuggest"
        class="pullList"
        @on-blur="hideSuggest"
      >
        <Row v-for="item in suggests" :key="item.id" class="suggestItem">
          <div @click="navigate(item.id)">
            {{ item.name }} -
            <span v-for="(artist, i) in item.artists" :key="artist.id"
              >{{ artist.name }}
              <span class="" v-if="i != item.artists.length - 1">，</span>
            </span>
          </div>
        </Row>
      </Col>
    </Row>
    <Table border :columns="colums" :data="data1"> </Table> 
  </div>
</template>

<script>
// @ is an alias to /src
import utils from "@/utils/utils"
import playerBar from "@/components/playerBar/playerBar.vue"
import {tableOption} from "@/mixins/tableOption.js"
import {phoneOption} from "@/mixins/phoneOption.js"

export default {
  name: "Test",
  components: {
    playerBar,
  },
  mixins:[tableOption,phoneOption],
  data() {
    return {
      value: "",
      suggests: [],
      showSuggest: false,
      musicDetail: {}, //*
      searchResult: [],
      colums:{},  //这个值根据窗口大小自动变化为tableColums或phoneColums
      data1: [],
      isTable:true, //这个值根据window.resize()更改
    }
  },
  methods: {
    updateSuggest: utils.debounce(function() {
      if (this.value == null || this.value == "") {
        this.suggests = []
        this.showSuggest = false
        console.log("无内容")
        return
      }
      this.axios
        .get(
          this.BaseURL + "/search/suggest?keywords=" + this.value + "&type=1"
        )
        .then((res) => {
          console.log(res)
          //先清空之前的建议
          this.suggests = []
          //开始添加建议（需要验证是否VIP歌曲）
          res.data.result.songs.forEach((item) => {
            //VIP歌曲是否显示
            if (!this.$store.state.showVIP) {
              //如果不显示VIP歌曲，遇到VIP歌曲就跳过
              if (item.fee != 1) {
                this.suggests.push(item)
              }
            }
          })
          this.showSuggest = true
        })
    }),
    hideSuggest() {
      setTimeout(() => (this.showSuggest = false), 100)
    },
    navigate(id) {
      console.log("ID:" + id)
      this.axios.get(this.BaseURL + "/song/detail?ids=" + id).then((res) => {
        console.log("-------------")
        console.log(res)
        //替换url为有效格式（原来的不可播放）
        res.data.songs[0].url="https://music.163.com/song/media/outer/url?id=" +res.data.songs[0].id +".mp3"
        this.$store.commit("updateMusicDetail", res.data.songs[0])
      })
    },
    search() {
      //防止提交空数据
      if(this.value=="") return;
      // 隐藏搜索推荐
      this.hideSuggest()
      //开始loading动画
      const msg = this.$Message.loading("搜索中...", 1)
      // 先清空
      this.data1 = []
      this.searchResult = []
      let keywords = this.value
      this.axios
        .get(this.BaseURL + "/cloudsearch?keywords=" + this.value)
        .then((res) => {
          console.log(res)
          res.data.result.songs.forEach((item) => {
            //VIP歌曲是否显示
            if (!this.$store.state.showVIP) {
              //如果不显示VIP歌曲，遇到VIP歌曲就跳过
              if (item.fee != 1) {
                this.searchResult.push(item)
              }
            }
          })
          this.searchResult.forEach((item) => {
            let artists = ""
            //名字拼接
            item.ar.forEach((i, index) => {
              artists += i.name
              //如果不是最后一个，再加个逗号
              if (index != item.ar.length - 1) {
                artists += ","
              }
            })
            this.data1.push({
              name: item.name,
              artists,
              album: "《" + item.al.name + "》",
            })
          })
          //关闭loading
          this.$Message.destroy()
        })
    },
    test() {
      console.log("测试")
    },
    play(index) {
      console.log("play" + index)
    },
    updateByWidth(){
      if(document.body.clientWidth>600){
        this.isTable = true;
        this.colums = this.tableColums
      }else{
        this.isTable = false;
        this.colums = this.phoneColums
      }
    }
  },
  computed: {
  },
  created(){
    //需要根据屏幕大小更新适配平台方案
    this.updateByWidth();
    //为屏幕变化添加自适应变化
    window.addEventListener("resize",()=>{
      // console.log("屏幕变化")
      this.updateByWidth()
    })
  },
  mounted() {
    //初始化时需要自动更新搜索建议
    this.updateSuggest();
  },
}
</script>

<style lang="scss" scoped>
.pullList {
  position: absolute;
  box-shadow: 0px 0px 2px #000;
  text-align: start;
  z-index: 1000;
  background: #fff;
}

.suggestItem {
  cursor: pointer;
  height: 36px;
  line-height: 36px;
  padding: 0px 6px;
  //超出不换行，变...
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  //停留动画
  &:hover {
    box-shadow: 0px 0px 2px #000;
  }
}

.tablePlay {
  transition: 0.5s;
  &:hover {
    fill: #ff9900;
  }
}
</style>
